<template>
  <div class="dashboard">
    <!-- 高德地图 -->
    <!-- <el-row>
      <el-col :span="16">
         <div id="map_container"></div>
      </el-col>
      <el-col :span="8" class="r">
        <div class="r_box">
          <div class="title">xxxx</div>
          <div class="pic">
            <span>xxxx {{50 + Math.round(Math.random()*9)}}次</span>
            <img src="@/assets/mt/animal.png" alt="">
          </div>
        </div>
        <div class="r_box">
          <div class="title">xxxx</div>
           <div  class="pic">
            <span>xxxx {{50 + Math.round(Math.random()*9)}}次</span>
            <img src="@/assets/mt/plant.png" alt="">
          </div>
        </div>
      </el-col>
    </el-row> -->
    <!-- 资讯列表 -->
    <div class="article_list"> 
      <!-- 分类资讯 -->
      <div class="aticle_box" v-for="ca in  categoryArticles" :key="'c'+ca.category.id">
        <div class="title">{{ca.category.name}}</div>
        <div class="articles">
          <div class="article" v-for="item in ca.articles" :key="item.id" @click="toDetails(item)">
            <div class="pic">
              <img v-if="item.cover" :src="item.cover" alt="">
              <img v-else src="@/assets/404_images/404.png" alt="">
            </div>
            <div class="article_info">
              <div class="title">{{item.title}}</div>
              <div class="author">{{item.author?item.author.realname:""}}</div>
              <div class="publish_time">{{item.publishTime | fmtDate}}</div>
              <div class="introduce">{{item.brief}}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- /分类资讯 -->
     
    </div>
  </div>
</template>
<script>
import {get,post} from '@/utils/request'
export default {
  data(){
    return {
      categoryArticles:{},
      applications:[],
      map:{},
      param:{
        page:1,
        page_size:15,
        key:'17532d3db7304dc7a3cfce990b668998'
      }
    }
  },
  created(){
    //this.loadApplications();
  },
  mounted(){
    // 初始化地图
    this.loadCategoryArticle();
    // this.initMap();
    // this.loadNews();
  },
  computed:{
    locations(){
      return this.applications.map(item => {
        return [+item.longitude,+item.latitude];
      })
    }
  },
  watch:{
    locations:{
      handler(v){
        v.forEach(item =>{
          let marker = new AMap.Marker({
            icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
            position: item,
            offset: new AMap.Pixel(-13, -30)
          });
          marker.setMap(this.map);
        })
      },
      deep:true
    }
  },
  methods:{
    // 加载新闻
    loadNews(){
      let url = "/toutiao/index"
      get(url, this.param).then(resp => {
        console.log(resp);
      })
    },
    // 查询应用
    loadApplications(){
      let url = "/application/findAll"
      get(url).then(response => {
        this.applications = response.data;
      })
    },
    // 跳转到资讯详情页面
    toDetails(row){
      this.$router.push({
        path:"/sys/article/Details",
        query:{id:row.id}
      })
    },
    // 加载资讯信息
    loadCategoryArticle(){
      let url ="/article/queryCateoryAriticleVM"
      get(url).then(response => {
        this.categoryArticles = response.data;
      })
    },
    // 初始化地图
    initMap(){
      this.map = new AMap.Map("map_container", {
        resizeEnable: true,
        center: [120.57152,31.41284],
        zoom: 9
      });
    }
  }
}
</script>
<style lang="scss" scoped>
#map_container {
  height: 400px;
}
.dashboard {
  .r {
    padding: 0 0 0 .5em;
    .r_box {
      height: 195px;
      color: #ffffff;
      border-radius: 5px;
      box-sizing: border-box;
      padding: 2em;
      .title {
        font-size: 14px;
        font-weight: bold;
        line-height: 2em;
      }
      .pic {
        text-align: right;
        img {
          height: 80px;
        }
      }
    }
    .r_box:first-child {
      margin-bottom: 10px;
      background-color: rgba(255,103,101,.6)
    }
    .r_box:last-child {
      background-color: rgba(87,117,255, .6)
    }
  }
  font-size: 14px;
  color: #666;
  .article_list {
    background-color: #f4f4f4;
    margin-top: 1em;

    .aticle_box {
      margin-bottom: 1em;
      & > .title {
        line-height: 3em;
        font-size: 14px;
        padding: 0 .5em;
      }
      .articles {
        padding: .5em;
        // 文章
        .article {
          display: flex;
          background-color: #ffffff;
          margin-bottom: .5em;
          padding: .5em;
          border-radius: 5px;
          cursor: pointer;
          .pic {
            width: 200px;
            height: 120px;
            overflow: hidden;
            border-radius: 5px;
            img {
              width: 100%;
            }
          }
          .article_info {
            font-size: 12px;
            flex: 1;
            padding: 0 1em;
            .title {
              line-height: 2em;
              font-size: 14px;
              font-weight: bold;
            }
            .author,.publish_time {
              line-height: 2em;
            }
          }
        }
      }
    }
  }
}
</style>